<template>
	<div id="cinema">
		<div class="nav">
			<span>全城<i class="fa fa-caret-down"></i></span>
			<span>品牌<i class="fa fa-caret-down"></i></span>
			<span>特色<i class="fa fa-caret-down"></i></span>
		</div>
		<div>
			<ul>
				<li v-for="item in cinemaList" :key="item.id">
					<p>
						<span>{{item.name}}</span>
						<span class="price">{{item.price}}</span>
						<span class="price-desc">元起</span>
					</p>
					<p class="address">
						<span>{{item.address}}</span>
						<span>>{{item.distance}}km</span>
					</p>
					<p class="tips">
						<span>小吃</span>
						<span>折扣卡</span>
					</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Cinema",
		methods: {
			getCinemaData() {
				var that = this;
				axios.get('/mock/api.json')
					.then(function(response) {
						console.log(response);
						if(response.status == 200){
							if(response.data && response.data.cinemaList){
								that.cinemaList = response.data.cinemaList;
							}
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			}
		},
		created() {
			this.getCinemaData();
		},
		data() {
			return {
				cinemaList: [],
			};
		},
	};
</script>

<style scoped>
	#cinema {
		padding-top: 50px;
	}

	.nav {
		border-bottom: 1px solid #ccc;
	}

	.nav span {
		width: 33.3%;
		display: inline-block;
		text-align: center;
		height: 45px;
		line-height: 45px;
	}

	.nav i {
		margin-left: 5px;
	}

	li {
		border-bottom: 1px solid #ccc;
		margin-left: 5px;
	}

	.price {
		color: #e54847;
		margin: 0 5px;
	}

	.price-desc {
		color: #e54847;
		font-size: 12px;
	}

	.address span {
		font-size: 12px;
		color: #999;
	}

	.address span:last-child {
		float: right;
		margin-right: 20px;
	}

	.tips span {
		display: inline-block;
		width: 55px;
		height: 25px;
		line-height: 25px;
		border: 1px solid #f90;
		color: #f90;
		margin: 5px 5px;
		text-align: center;
	}
</style>
